<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>watch 选项</title>
	</head>

	<body>
		<div id="app">
			<h2>watch 选项</h2>
			<hr />
			<p>今日温度：{{temperature}}</p>
			<p>穿衣指数：{{clothes}}</p>
			<p><button @click="Heating">升温按钮</button><button @click="cooling">降温按钮</button></p>
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			var cloth = ['棉衣、雪地靴', '毛呢大衣、长筒靴', '短袖长裙、凉鞋'];
			var vm = new Vue({
				el: '#app',
				data: {
					temperature: 12,
					clothes: '毛呢大衣、长筒靴'
				},
				methods: {
					Heating: function() {
						return this.temperature += 4;
					},
					cooling: function() {
						return this.temperature -= 4;
					}
				},
				//watch可以写在构造器里面，也可以写在构造器外面,方法名可以写要监听的对象，可传值
				//				watch: {
				//					temperature: function() {
				//						if(this.temperature >=27){
				//							this.clothes = '短袖长裙、凉鞋'
				//						} else if(this.temperature <=12) {
				//							this.clothes = '棉衣、雪地靴'
				//						}else{
				//							this.clothes = '毛呢大衣、长筒靴'
				//						}
				//					}
				//				}
			})
			//watch写在构造器外面时，最好写在声明构造器的下面
			//便于调用构造器对象
			vm.$watch('temperature', function() {
				if(this.temperature >= 27) {
					this.clothes = cloth[2]
				} else if(this.temperature <= 12) {
					this.clothes = cloth[0]
				} else {
					this.clothes = cloth[1]
				}
			})
		</script>
	</body>

</html>